<template>
  <div class="app-container">
    <el-form :model="formInline" class="form-inline" ref="form" label-width="180px">
      <el-row :gutter="10">
        <el-col :lg="8" :xl="6"><el-form-item label="交易号（微信支付宝）" style="width: 100%">
            <el-input v-model="formInline.payTradeNo" placeholder="交易号（微信支付宝）"></el-input> </el-form-item></el-col>
        <el-col :lg="8" :xl="6"><el-form-item label="交易号（自定义）" style="width: 100%">
            <el-input v-model="formInline.tradeNo" placeholder="交易号（自定义）"></el-input> </el-form-item></el-col>
        <el-col :lg="8" :xl="6"><el-form-item label="核验状态" style="width: 100%">
            <el-select clearable v-model="formInline.checkStatus" style="width: 100%">
              <el-option label="已核验" value="1"></el-option>
              <el-option label="核验异常" value="2"></el-option>
            </el-select> </el-form-item></el-col>
        <el-col :lg="8" :xl="6"><el-form-item label="手机号（账号）" style="width: 100%">
            <el-input v-model="formInline.phonenumber" placeholder="手机号（账号）"></el-input> </el-form-item></el-col>
        <el-col :lg="8" :xl="6"><el-form-item label="公司名称" style="width: 100%">
            <el-input v-model="formInline.enterpriseName" placeholder="公司名称"></el-input> </el-form-item></el-col>
        <el-col :lg="8" :xl="6">
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button type="primary" :disabled="!tableData.length" @click="downloadExcel">导出</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="table" :data="tableData">
      <el-table-column align="center" prop="phonenumber" label="手机号（账号）" width="220">
      </el-table-column>

      <el-table-column align="center" prop="enterpriseName" label="公司名称">
      </el-table-column>
      <el-table-column align="center" prop="payTradeNo" label="交易号（微信支付宝）" width="180">
      </el-table-column>

      <el-table-column align="center" prop="tradeNo" label="交易号（自定义）" width="180">
      </el-table-column>

      <el-table-column align="center" prop="tradeType" label="支付类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.tradeType === '1'" type="success">微信</el-tag>
          <el-tag v-if="scope.row.tradeType === '2'" type="danger">支付宝</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="payStatus" label="支付状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.payStatus === '1'">待支付</el-tag>
          <el-tag v-if="scope.row.payStatus === '2'" type="success">支付成功</el-tag>
          <el-tag v-if="scope.row.payStatus === '3'" type="danger">支付失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="checkStatus" label="核验状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.checkStatus === '1'">已核验</el-tag>
          <el-tag v-if="scope.row.checkStatus === '2'" type="danger">核验异常</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="money" label="充值金额(元)">
      </el-table-column>
      <el-table-column align="center" width="270" prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column align="center" width="270" prop="checkRemark" label="核验备注">
      </el-table-column>
      <el-table-column align="center" width="270" label="操作" fixed="right"
        v-if="tableData.some((item) => item.checkStatus === '2')">
        <template slot-scope="scope">
          <el-button v-if="scope.row.checkStatus === '2'" size="mini" type="text" icon="el-icon-view"
            @click="verification(scope.row)">核验</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 20px" background @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="page.pageNum" :page-sizes="[10, 20, 50]"
      :page-size="page.pageSize" layout="->, total, sizes, prev, pager, next, jumper" :total="page.total">
    </el-pagination>
    <view-or-examine @initTable="initTable" ref="viewOrExamine"></view-or-examine>
  </div>
</template>
<script>
import viewOrExamine from "./viewOrExamine.vue";
import moment from "moment";

export default {
  components: { viewOrExamine },
  data() {
    return {
      orderRow: {},
      cancelOrderForm: {
        orderStatusRemark: "",
      },
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      formInline: {
        payTradeNo: "",
        tradeNo: "",
        checkStatus: "",
        phonenumber: "",
        enterpriseName: "",
      },
      tableData: [],
      tableHeight: 0,
    };
  },
  methods: {
    downloadExcel() {
      const params = {
        ...this.formInline,
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
      };
      const date = moment().format('YYYY-MM-DD HH:mm:ss')

      this.download(
        "/wallet/expense/exportAbnormal",
        {
          ...params,
        },
        `异常订单${date}.xls`
      );
    },
    verification(row) {
      this.$confirm("确定操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          const params = {
            walletExpenseId: row.walletExpenseId,
          };
          console.log(params, params);
          this.$post("/wallet/expense/disposeAbnormal", params).then((res) => {
            if (res && res.code == "200") {
              this.$message.success("操作成功");
              this.initTable();
            }
          });
        })
        .catch(() => {
          //
        });
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getTableData();
    },
    view(row) {
      console.log(row, "row");
      this.$refs.viewOrExamine.dialogFormVisible = true;
      this.$refs.viewOrExamine.title = "查看";
      this.$refs.viewOrExamine.isExamine = false;
      // this.$refs.viewOrExamine.getProcess(row.orderNum);
      this.$refs.viewOrExamine.row = row;
      this.$refs.viewOrExamine.insureUrl = row.insureUrl;
      this.$refs.viewOrExamine.form.insureNum = row.insureNum;
    },
    setTableHeight() {
      this.$nextTick(() => {
        const queryConditionHeight = this.$refs.form.$el.offsetHeight;
        this.tableHeight =
          window.innerHeight - queryConditionHeight - 180 + "px";
      });
    },
    initTable() {
      this.page.pageNum = 1;
      this.getTableData();
    },
    getTableData() {
      const params = {
        ...this.formInline,
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
      };
      console.log(params, params);
      this.$get("/wallet/expense/abnormalList", params).then((res) => {
        this.tableData = res.rows;
        this.page.total = res.total;
      });
    },
  },
  mounted() {
    window.onresize = () => {
      this.setTableHeight();
    };
    this.setTableHeight();
    this.getTableData();
  },
};
</script>
<style scoped lang="scss">
.form-inline ::v-deep {
  width: 100%;

  .el-form-item__label {
    // padding: 0;
  }
}
</style>